<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="gid">
        <el-input v-model="searchMap.gid" placeholder="商品编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="gname">
        <el-input v-model="searchMap.gname" placeholder="商品名"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="gprice">
        <el-input v-model="searchMap.gprice" placeholder="商品单价"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="gtype">
        <el-select v-model="searchMap.gtype" placeholder="商品外形">
          <el-option label="砖状" value="砖状"></el-option>
          <el-option label="杯状" value="杯状"></el-option>
          <el-option label="锥形" value="锥形"></el-option>
          <el-option label="异形" value="异形"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!--el-button type="primary" @click="fetchData">查询</!--el-button -->
        <!--el-button @click="resetForm('searchForm')">重置</！el-button -->
        <!--el-button @click="dialogFormVisible = true" style="background:#a5ec93;">新增</!--el-button -->
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table
      :data="list"
      border
      stripe
      style="width: 100%; font-size: 2px; height: 100%"
      :cell-style="{ padding: '0px' }"
      :row-style="{ height: '36px' }"
    >
      <el-table-column type="index" label="序号" width="46"> </el-table-column>
      <el-table-column prop="gid" label="商品编号"> </el-table-column>
      <el-table-column prop="gname" label="商品名"> </el-table-column>
      <el-table-column prop="gtype" label="商品外形" width="80">
      </el-table-column>
      <el-table-column prop="gprice" label="价格(元/个)" width="94">
      </el-table-column>
      <el-table-column prop="gcounts" label="库存(个)" width="80">
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.gid)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.gid,scope.row.gname)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增商品" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="商品名称" style="height: 36px" prop="gname">
          <el-input v-model="pojo.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品外形" style="height: 36px" prop="gtype">
          <el-select v-model="pojo.gtype" placeholder="请选择商品外形">
            <el-option label="砖状" value="砖状"></el-option>
            <el-option label="杯状" value="杯状"></el-option>
            <el-option label="锥形" value="锥形"></el-option>
            <el-option label="异形" value="异形"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品单价" style="height: 36px" prop="gtype">
          <el-input v-model="pojo.gprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" style="height: 10px" prop="gcounts">
          <el-input v-model="pojo.gcounts" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneGoods('pojo')">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑商品信息" :visible.sync="dialogFormVisible2">
      <el-form
        :rules="rules"
        ref="pojoEdit"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojoEdit"
      >
        <el-form-item label="商品名称" style="height: 36px" prop="gname">
          <el-input v-model="pojoEdit.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品外形" style="height: 36px" prop="gtype">
          <el-select v-model="pojoEdit.gtype" placeholder="请选择商品外形">
            <el-option label="砖状" value="砖状"></el-option>
            <el-option label="杯状" value="杯状"></el-option>
            <el-option label="锥形" value="锥形"></el-option>
            <el-option label="异形" value="异形"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品单价" style="height: 36px" prop="gtype">
          <el-input v-model="pojoEdit.gprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" style="height: 10px" prop="gcounts">
          <el-input v-model="pojoEdit.gcounts" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="saveOneGoods('pojoEdit')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import goodsApi from "@/api/goods";

export default {
  data() {
    return {
      list: [],
      searchMap: {
        gid: "",
        gname: "",
        gprice: "",
        gtype: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      titles:"xinz",
      pojo: {
        gname: '',
        gtype: '',
        gprice: '',
        gcounts: '',
      },
      pojoEdit: {
        gid: '',
        gname: '',
        gtype: '',
        gprice: '',
        gcounts: '',
      },
      rules: {
        gname: [{ required: true, message: "商品名不能为空", trigger: "blur" }],
        gtype: [{ required: true, message: "付款类型不能为空", trigger: "change" }],
        gprice: [{ required: true, message: "单价不能为空", trigger: "blur" }],
        gcounts: [{ required: true, message: "库存不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      goodsApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    handleEdit(gid) {
      goodsApi.getOneGoods(gid).then((response) => {
        this.pojoEdit.gid = response.data[0].gid;
        this.pojoEdit.gname = response.data[0].gname;
        this.pojoEdit.gtype = response.data[0].gtype;
        this.pojoEdit.gprice = response.data[0].gprice;
        this.pojoEdit.gcounts = response.data[0].gcounts;
        
      })
      this.dialogFormVisible2 = true;
    },
    saveOneGoods(fromName){
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          goodsApi.editOneGoods(this.pojoEdit).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible2 = false;
          });
        } else {
        }
      });
    },
    handleDelete(gid,gname) {
      this.$confirm("此操作将永久删除"+gname+", 是否继续?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          goodsApi.deleteOneGoods(gid).then((response) => {
            if (response.data == 1) {
              this.fetchData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneGoods(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          goodsApi.addOneGoods(this.pojo).then((response) => {
            console.log(response.data);
            this.fetchData();
            this.dialogFormVisible = false;
          });
        } else {
        }
      });
    },
  },
};
</script>
<style scoped>
.item {
  height: 46px;
}
.items1 {
  width: 140px;
}
.items2 {
  width: 140px;
}
.items3 {
  width: 120px;
}
.items4 {
  width: 120px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>